<template>
  <div>
    <!-- 主内容区域 -->
    <div class="main-content">
      <div class="page-title">账号信息</div>

      <!-- 账号信息卡片 -->
      <!-- 账号表单 -->
      <div class="account-form">
        <el-tabs v-model="activeTab" class="form-tabs">
          <el-tab-pane label="基本信息" name="basic"></el-tab-pane>
          <el-tab-pane label="联系方式" name="contact"></el-tab-pane>
          <el-tab-pane label="账号绑定" name="bindings"></el-tab-pane>
          <el-tab-pane label="隐私设置" name="privacy"></el-tab-pane>
        </el-tabs>

        <div class="form-content">
          <el-form :model="userInfo" label-width="120px" ref="userForm">
            <!-- 基本信息 -->
            <div v-show="activeTab === 'basic'">
              <el-form-item label="昵称" prop="nickname">
                <el-input v-model="userInfo.nickname"></el-input>
              </el-form-item>

              <el-form-item label="头像" prop="avatar">
                <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/"
                           :show-file-list="false" :on-success="handleAvatarSuccess"
                           :before-upload="beforeAvatarUpload">
                  <img v-if="userInfo.avatar" :src="userInfo.avatar" class="avatar-preview"/>
                  <i v-else class="fa-solid fa-user-circle avatar-placeholder"></i>
                  <div class="el-upload__text">点击上传头像</div>
                </el-upload>
              </el-form-item>

              <el-form-item label="性别" prop="gender">
                <el-radio-group v-model="userInfo.gender">
                  <el-radio label="m">男</el-radio>
                  <el-radio label="f">女</el-radio>
                  <el-radio label="n">保密</el-radio>
                </el-radio-group>
              </el-form-item>

              <el-form-item label="出生日期" prop="birthday">
                <el-date-picker v-model="userInfo.birthday" type="date" placeholder="选择出生日期" format="yyyy-MM-dd"
                                value-format="yyyy-MM-dd"></el-date-picker>
              </el-form-item>

              <el-form-item label="个人简介" prop="description">
                <el-input type="textarea" v-model="userInfo.description" rows="4"></el-input>
              </el-form-item>

              <el-form-item label="个人标签" prop="tags">
                <el-input v-model="userInfo.tags" placeholder="多个标签用逗号分隔"></el-input>
              </el-form-item>
            </div>

            <!-- 联系方式 -->
            <div v-show="activeTab === 'contact'">
              <el-form-item label="手机号码" prop="phone">
                <el-input v-model="userInfo.phone" placeholder="请输入手机号码"></el-input>
              </el-form-item>

              <el-form-item label="电子邮箱" prop="email">
                <el-input v-model="userInfo.email" placeholder="请输入电子邮箱"></el-input>
              </el-form-item>

              <el-form-item label="微信号" prop="wechat">
                <el-input v-model="userInfo.wechat" placeholder="请输入微信号"></el-input>
              </el-form-item>

              <el-form-item label="QQ号" prop="qq">
                <el-input v-model="userInfo.qq" placeholder="请输入QQ号"></el-input>
              </el-form-item>

              <el-form-item label="所在城市" prop="city">
                <el-cascader v-model="userInfo.city" :options="cityOptions" placeholder="请选择所在城市"
                             change-on-select></el-cascader>
              </el-form-item>
            </div>

            <!-- 账号绑定 -->
            <div v-show="activeTab === 'bindings'">
              <el-form-item label="微信">
                <div class="binding-item">
                  <i class="fa-brands fa-weixin binding-icon"></i>
                  <span class="binding-name">微信</span>
                  <span class="binding-status" v-if="userInfo.wechatBound">已绑定</span>
                  <span class="binding-status" v-else>未绑定</span>
                  <el-button size="small" :type="userInfo.wechatBound ? 'danger' : 'primary'"
                             @click="handleBinding('wechat')">
                    {{ userInfo.wechatBound ? '解除绑定' : '绑定' }}
                  </el-button>
                </div>
              </el-form-item>

              <el-form-item label="微博">
                <div class="binding-item">
                  <i class="fa-brands fa-weibo binding-icon"></i>
                  <span class="binding-name">微博</span>
                  <span class="binding-status" v-if="userInfo.weiboBound">已绑定</span>
                  <span class="binding-status" v-else>未绑定</span>
                  <el-button size="small" :type="userInfo.weiboBound ? 'danger' : 'primary'"
                             @click="handleBinding('weibo')">
                    {{ userInfo.weiboBound ? '解除绑定' : '绑定' }}
                  </el-button>
                </div>
              </el-form-item>

              <el-form-item label="抖音">
                <div class="binding-item">
                  <i class="fa-brands fa-tiktok binding-icon"></i>
                  <span class="binding-name">抖音</span>
                  <span class="binding-status" v-if="userInfo.douyinBound">已绑定</span>
                  <span class="binding-status" v-else>未绑定</span>
                  <el-button size="small" :type="userInfo.douyinBound ? 'danger' : 'primary'"
                             @click="handleBinding('douyin')">
                    {{ userInfo.douyinBound ? '解除绑定' : '绑定' }}
                  </el-button>
                </div>
              </el-form-item>

              <el-form-item label="B站">
                <div class="binding-item">
                  <i class="fa-brands fa-bilibili binding-icon"></i>
                  <span class="binding-name">B站</span>
                  <span class="binding-status" v-if="userInfo.bilibiliBound">已绑定</span>
                  <span class="binding-status" v-else>未绑定</span>
                  <el-button size="small" :type="userInfo.bilibiliBound ? 'danger' : 'primary'"
                             @click="handleBinding('bilibili')">
                    {{ userInfo.bilibiliBound ? '解除绑定' : '绑定' }}
                  </el-button>
                </div>
              </el-form-item>
            </div>

            <!-- 隐私设置 -->
            <div v-show="activeTab === 'privacy'">
              <el-form-item label="谁可以查看我的粉丝列表">
                <el-radio-group v-model="userInfo.fansListVisibility">
                  <el-radio label="everyone">所有人</el-radio>
                  <el-radio label="followers">关注我的人</el-radio>
                  <el-radio label="nobody">仅自己</el-radio>
                </el-radio-group>
              </el-form-item>

              <el-form-item label="谁可以查看我的关注列表">
                <el-radio-group v-model="userInfo.followingListVisibility">
                  <el-radio label="everyone">所有人</el-radio>
                  <el-radio label="followers">关注我的人</el-radio>
                  <el-radio label="nobody">仅自己</el-radio>
                </el-radio-group>
              </el-form-item>

              <el-form-item label="谁可以私信我">
                <el-radio-group v-model="userInfo.messagePermission">
                  <el-radio label="everyone">所有人</el-radio>
                  <el-radio label="followers">关注我的人</el-radio>
                  <el-radio label="friends">互相关注的人</el-radio>
                </el-radio-group>
              </el-form-item>

              <el-form-item label="是否允许他人保存我的图片">
                <el-switch v-model="userInfo.allowSaveImage"></el-switch>
              </el-form-item>

              <el-form-item label="是否允许他人转发我的内容">
                <el-switch v-model="userInfo.allowRepost"></el-switch>
              </el-form-item>
            </div>

            <el-form-item>
              <div class="form-actions">
                <el-button type="primary" @click="handleSave">保存</el-button>
                <el-button @click="handleCancel">取消</el-button>
              </div>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "AccountView",
  /**
   * 调用组建
   * @type {Object}
   */
  data() {
    return {
      activeMenu: 'settings-account',
      activeTab: 'basic',
      userInfo: {
        nickname: '创作者',
        avatar: 'https://picsum.photos/id/64/200/200',
        gender: 'f',
        birthday: '1990-01-01',
        description: '分享美妆、穿搭、生活方式的小红书创作者',
        tags: '美妆,穿搭,生活方式',
        phone: '13800138000',
        email: 'example@example.com',
        wechat: 'creator',
        qq: '12345678',
        city: ['310000', '310100', '310104'],
        wechatBound: true,
        weiboBound: false,
        douyinBound: true,
        bilibiliBound: false,
        fansListVisibility: 'followers',
        followingListVisibility: 'followers',
        messagePermission: 'friends',
        allowSaveImage: true,
        allowRepost: true
      },
      cityOptions: [
        {
          value: '310000',
          label: '上海市',
          children: [
            {
              value: '310100',
              label: '市辖区',
              children: [
                {
                  value: '310101',
                  label: '黄浦区'
                },
                {
                  value: '310104',
                  label: '徐汇区'
                },
                {
                  value: '310105',
                  label: '长宁区'
                }
              ]
            }
          ]
        },
        {
          value: '110000',
          label: '北京市',
          children: [
            {
              value: '110100',
              label: '市辖区',
              children: [
                {
                  value: '110101',
                  label: '东城区'
                },
                {
                  value: '110102',
                  label: '西城区'
                }
              ]
            }
          ]
        }
      ]
    }
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    handleAvatarSuccess(res, file) {
      this.userInfo.avatar = URL.createObjectURL(file.raw);
      this.$message.success('头像上传成功');
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
      if (!isJPG) {
        this.$message.error('请上传JPG/PNG格式的图片');
        return false;
      }
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error('图片大小不能超过2MB');
        return false;
      }
      return true;
    },
    handleBinding(type) {
      console.log(`处理${type}账号绑定`);
      if (this.userInfo[`${type}Bound`]) {
        // 解除绑定
        this.$confirm(`确定要解除${type === 'wechat' ? '微信' : type === 'weibo' ? '微博' : type === 'douyin' ? '抖音' : 'B站'}绑定吗？`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.userInfo[`${type}Bound`] = false;
          this.$message.success(`${type === 'wechat' ? '微信' : type === 'weibo' ? '微博' : type === 'douyin' ? '抖音' : 'B站'}绑定已解除`);
        }).catch(() => {
          // 用户取消操作
        });
      } else {
        // 绑定账号
        this.$message.info(`跳转到${type === 'wechat' ? '微信' : type === 'weibo' ? '微博' : type === 'douyin' ? '抖音' : 'B站'}绑定页面`);
        // 模拟绑定成功
        setTimeout(() => {
          this.userInfo[`${type}Bound`] = true;
          this.$message.success(`${type === 'wechat' ? '微信' : type === 'weibo' ? '微博' : type === 'douyin' ? '抖音' : 'B站'}绑定成功`);
        }, 1000);
      }
    },
    handleSave() {
      this.$refs.userForm.validate((valid) => {
        if (valid) {
          console.log('保存用户信息', this.userInfo);
          // 这里应该调用API保存用户信息
          this.$message.success('账号信息保存成功');
        } else {
          console.log('验证失败');
          return false;
        }
      });
    },
    handleCancel() {
      // 重置表单
      this.$refs.userForm.resetFields();
    }
  },
  components: {},
  /**
   * 组建属性
   * @type {Object}
   */
  props: {},
  /**
   * 计算属性
   * @type {Object}
   */
  computed: {},
  /**
   * 数据监听
   * @type {Object}
   */
  watch: {},
  /**
   * 页面创建时
   * @return {[type]} [description]
   */
  created() {
  },
  /**
   * 页面加载时
   * @return {[type]} [description]
   */
  mounted() {
  },
};
</script>
<style lang="scss" scoped>
/* 账号信息卡片 */
.account-card {
  background-color: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
}

.account-header {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #EBEEF5;
}

.avatar-container {
  position: relative;
}

.avatar-wrapper {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #EBEEF5;
}

.avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.change-avatar-btn {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 36px;
  height: 36px;
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s;
}

.avatar-container:hover .change-avatar-btn {
  opacity: 1;
}

.account-info {
  flex: 1;
}

.account-name {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 8px;
}

.account-id {
  color: var(--gray-color);
  margin-bottom: 12px;
}

.account-stats {
  display: flex;
  gap: 24px;
}

.stat-item {
  text-align: center;
}

.stat-value {
  font-size: 18px;
  font-weight: bold;
}

.stat-label {
  color: var(--gray-color);
  font-size: 14px;
}

/* 账号表单 */
.account-form {
  background-color: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.form-tabs {
  margin-bottom: 20px;
}

.form-content {
  padding: 20px 0;
}

.form-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}
.el-button--small {
    padding: 9px 15px;
    font-size: 12px;
    border-radius: 3px;
    margin-left: 10px;
}
</style>
